<template>
  <div style="width: 100%;overflow: hidden">
    <div class="back" @click="tologin">
      <i class="el-icon-arrow-left"></i>我的地址
    </div>
    <div class="addresslist" v-show="this.$store.state.login">
      <ul>
        <li v-for="(item, index) in addresslist" :key="index" >
          <div v-show="item.flag" class="add1-box">
            <div class="list-left">
              <span class="ls1">{{item.name}}</span>{{item.sex}}<span class="ls2">{{item.number}}</span>
              <p>{{item.address}} {{item.door}}</p>
            </div>
            <div class="listicon"><i class="el-icon-edit-outline" @click="editaddress(item)"></i><i class="el-icon-close" @click="deleted(item)"></i></div>
          </div>
        </li>
      </ul>
    </div>
    <div  v-show="this.$store.state.newLogin">
      <p style="text-align: center;margin-top: 10px" v-show="!this.$store.state.addressL.flag ">添加您的收货地址吧~</p>
      <div class="addresslist">
        <ul>
          <li v-for="item of more">
            <div v-show="item.flag" class="add1-box">
              <div class="list-left">
                <span class="ls1">{{item.name}}</span>{{item.sex}}<span class="ls2">{{item.number}}</span>
                <p>{{item.address}} {{item.door}}</p>
              </div>
              <div class="listicon"><i class="el-icon-edit-outline" @click="editaddress(item)"></i><i class="el-icon-close" @click="newDeleted(item)"></i></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="addaddress" @click="addAddress">
       <i class="el-icon-circle-plus-outline"></i>
        添加收货地址
    </div>
  </div>
</template>
<script>
  export default {
    name: 'addresslist',
    data () {
      return {
        addresslist: [],
        address: [{
          flag: true,
          name: '小白',
          sex: '先生',
          number: '15766093032',
          address: '广东石油化工学院',
          door: '1区A909'
        }, {
          flag: true,
          name: '周杰伦',
          sex: '先生',
          number: '15766093032',
          address: '广东石油化工学院',
          door: '9区A909'
        }, {
          flag: true,
          name: '小爱',
          sex: '女士',
          number: '15766093032',
          address: '广东石油化工学院4区',
          door: 'B204'
        }],
        more: [{
          flag: this.$store.state.addressL.flag,
          name: this.$store.state.addressL.name,
          sex: this.$store.state.addressL.sex,
          number: this.$store.state.addressL.number,
          address: this.$store.state.addressL.address,
          door: this.$store.state.addressL.door}]
      }
    },
    created () {
      this.addresslist = this.address.concat(this.more)
      this.$forceUpdate()
    },
    methods: {
      tologin () {
        this.$router.push('/login')
      },
      editaddress (item) {
        this.$router.push({path: '/editaddresss', query: {name: item.name, sex: item.sex, number: item.number, address: item.address, door: item.door}})
      },
      addAddress () {
        this.$router.push('/addaddress')
      },
      deleted (item) {
        this.$set(item, 'flag', false)
      }
      // newDeleted (item) {
      //   this.$store.dispatch()
      // }
    }
  }
</script>
<style lang="stylus" type="text/stylus">
  @import '../../common/stylus/mixin.styl'
  .back
    width :100%
    height :40px
    background-color :blue
    line-height :40px
    color :white
    padding-left :10px
    font-size :14px
    i
      margin-right :20px
      font-size :18px
  .addresslist
    ul
      list-style :none
      li
        .add1-box
          width :100%
          height :80px
          border-bottom :1px solid rgba(7,17,27,.1)
          margin-bottom :3px
          .list-left
            display :inline-block
            width :75%
            font-size :12px
            color :#cccccc
            margin :20px 0 0 20px
            .ls1
              font-size :16px
              font-weight :bold
              margin-right :7px
              color :black
            .ls2
              margin-left :7px
            p
              margin-top :10px
          .listicon
            display :inline-block
            i
              margin-right :10px
              font-size :18px
  .addaddress
    position :absolute
    bottom :0
    left :0
    width :100%
    height :35px
    text-align :center
    background-color :deepskyblue
    color :white
    line-height :35px

</style>
